<template>
  <div class="modal">
    <div class="modal-content" :class="{ circle: !isExpanded }" @click="handleClick">
      <div class="donate-icon-wrapper" :class="{ 'is-close': isExpanded }" @click.stop="handleIconClick">
        <svg class="donate-icon" viewBox="0 0 24 24" width="24" height="24">
          <path fill="currentColor" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
        </svg>
      </div>
      
      <div class="modal-inner-content">
        <h2>感谢支持</h2>
        <div class="qr-container">
          <img src="@/assets/wechat-pay.jpg" alt="微信收款码" class="qr-code">
          <p class="qr-label">微信支付</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DonateButton',
  data() {
    return {
      isExpanded: false
    }
  },
  methods: {
    handleClick() {
      if (!this.isExpanded) {
        this.expand()
      }
    },
    handleIconClick() {
      if (this.isExpanded) {
        this.close()
      } else {
        this.expand()
      }
    },
    expand() {
      this.isExpanded = true
    },
    close() {
      this.isExpanded = false
    }
  }
}
</script>

<style scoped>
.modal {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

.modal-content {
  background: white;
  border-radius: 20px;
  padding: 2rem;
  width: 320px;
  position: relative;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  transform-origin: right center;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-content.circle {
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-right: 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.donate-icon-wrapper {
  position: absolute;
  left: -20px;
  top: -20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  color: #ec4899;
  transition: all 0.3s ease;
  z-index: 1;
}

.donate-icon-wrapper:hover {
  transform: scale(1.1);
  color: #e11d48;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.modal-content.circle .donate-icon-wrapper {
  position: static;
  width: 100%;
  height: 100%;
  box-shadow: none;
  background: transparent;
  animation: heartbeat 1.3s ease-in-out infinite;
}

.donate-icon-wrapper.is-close {
  transform: rotate(45deg);
}

.donate-icon-wrapper.is-close:hover {
  transform: rotate(45deg) scale(1.1);
}

.modal-inner-content {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 2rem;
}

.modal-content:not(.circle) .modal-inner-content {
  opacity: 1;
  visibility: visible;
  position: relative;
  transition-delay: 0.2s;
}

h2 {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #4f46e5, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.qr-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.qr-code {
  width: 240px;
  height: 240px;
  object-fit: contain;
  border-radius: 12px;
  padding: 8px;
  background: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}

.qr-code:hover {
  transform: scale(1.02);
}

.qr-label {
  font-size: 1rem;
  color: #4b5563;
  font-weight: 500;
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.1);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.1);
  }
  70% {
    transform: scale(1);
  }
}

@media (max-width: 640px) {
  .modal {
    right: 20px;
    top: auto;
    bottom: 20%;
    transform: none;
  }
  
  .modal-content {
    width: 300px;
    padding: 1.5rem;
  }
  
  .qr-code {
    width: 220px;
    height: 220px;
  }
}
</style> 